<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Scrumpad</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="style.css" />
	<!--[if lt IE 7.0]>
		<link rel="stylesheet" type="text/css" href="styleie7.css" />
	<![endif]-->
</head>
<body>
<center>
  <div id="body-container">
    <div id="body-header">
      <div id="top-left">&nbsp;</div>
      <div id="top-middle"><h1>Liquid Design</h1></div>
      <div id="top-right">&nbsp;</div>
    </div>
    <div id="top-menu"> <a href="index.html">Home</span></a> |&nbsp; <a href="http://morshed-alam.blogspot.com" target="_blank">My Blog</span></a> 
      |&nbsp; <a href="http://www.linkedin.com/in/morshed" target="_blank">View My Linkedin Profile</span></a>       
      |&nbsp; <a href="http://www.morshed-alam.com" target="_blank">View My Personal Website</span></a> 
      |&nbsp; <a href="http://www.hotsalesbd.com" target="_blank">Best E-commerce Site in BD</span></a> 
      |&nbsp;<a href="useful-link.html">Useful Links</span></a> |&nbsp;<a href="about-me.html">About 
      Me</a> </div>
    <div id="body-content"> 
      <div id="content-left">
	    <div class="color_box_one">
		  <div class="title_one">What is Liquid Design?</div>
		  <div class="content_one">
		  The term "liquid" implies that a Website should flow smoothly into whatever space it is given. 
		  If you use a high resolution monitor, this may mean that you need to resize your browser a little, 
		  which most people in that situation do. If you have a low resolution monitor, you will still see the information, 
		  it will just be a little more compact.
<br /><br />
If you do Liquid Design right, you should be able to make your pages display on almost anything and still make sense to the user.
<br /><br />
Not everyone has perfect vision, and many of your potential customers may indeed be blind. 
If you build your site using relative font units and percentage based widths for common elements, 
you'll already be making life a lot easier for a portion of your visitors. Maybe even many of them.
		  </div>
		</div>
		<div id="content-seperator"></div>
	    <div class="color_box_one">
		  <div class="title_one">Importance of 'liquid design' in creating web design</div>
		  <div class="content_one">
		  The goal of liquid design is <b></b>providing similar experience</b> to people and eliminate 
		  possible irritating design flaws such as too much white space, 
		  disappearance of certain sectors of information due to lack of space etc. 
		  </div>
		</div>
		<div id="content-seperator"></div>
	    <div class="color_box_one">
		  <div class="title_one">Resolution statistics and interpretation</div>
		  <div class="content_one">
		  A web designer's task is to predict the available space the web site can use to display. One must consider first of all what the web site's target audience is. For example, people who work with computers every day (programmers, other designers etc) often like to have a "bigger picture" of things hence they are more likely to have high resolutions - 1024x768 or even higher. People who access the Internet from universities or educational institutes are likely to use older computers and may use 480x640 or 600x800 resolutions.<br><br>

Recent statistics show that most people use 1024x768 resolutions (nearly 44%) and 600x800 resolutions (50%). Until recently, the number of those who used 1024x768 resolutions was much lower, while 480x640 resolution was the preferred resolution by users. As technology evolves, the percentages change. Nowadays, web designers have started designing for the 600x800 and above.
<br><br>
The effective screen space is smaller than the actual number of pixels (e.g. width of 800 pixels and height of 600 pixels for 600x800 resolutions). The reason is that people use up space by adding toolbars and different additional buttons to their browser window. For example, when designing for a 600x800 resolution the web designer should in fact design for 409x741 (width of 741 pixels and height of 409 pixels) although this is not fail-proof for every situation.
		  </div>
		</div>
		<div id="content-seperator"></div>
	    <div class="color_box_one">
		  <div class="title_one">The secret of liquid layouts </div>
		  <div class="content_one">
		  <ol>
			<li>work out a basic layout grid before you begin coding</li>
			<li>include gutters so that your columns will not spread too wide</li>
			<li>use percentage units for widths of all containers and gutters</li>
			<li>do not define containers that use the full width of a page - allow for browser rendering issues (such as percentage rounding)</li>
		</ol>
		  </div>
		</div>
		<div id="content-seperator"></div>
	    <div class="color_box_one">
		  <div class="title_one">Liquid Design: Can it be Done?</div>
		  <div class="content_one">
		  Yes, without a doubt! Fixed layouts are slowly becoming a thing of the past. And the principles and considerations involved in creating a liquid layout (rather than a fixed layout) are very easy to implement on your site.<br><br>

However, the whole liquid idea does require a shift of focus. Stop thinking of the Web as a medium you can control, stop thinking for your users, and you'll be happier, your visitors will be happier, and the Web will be just a little more pleasent for everyone.
		  </div>
		</div>
		<div id="content-seperator"></div>
	    <div class="color_box_one">
		  <div class="title_one">Is liquid design adequate for any web site?</div>
		  <div class="content_one">
		  In order to make a decision whether liquid design is suitable for a web site, factors such as type of content, structure, amount of information must be taken in consideration. Liquid design is ideal for sites with a lot of information. The elasticity of such sites increases readability.
		  </div>
		</div>
		<div id="content-seperator"></div>
	    <div class="color_box_one">
		  <div class="title_one">Pros and Cons of Liquid design..</div>
		  <div class="content_one">
		  <b>Pros:</b> The major benefit of a liquid design is that the layout will adjust to fill a variety of resolutions. 
		  You can create a site that will work well at both low and high resolutions without all the empty space outside 
		  of the design. A liquid layout with it’s use of ‘em’ or percents instead of pixels will be more accessible to 
		  viewers with poor eyesight as they can more easily resize the text. It can also be easier to fit all of your 
		  content into the design for those viewers with higher resolution monitors.
<br><br>
<b>Cons:</b> A liquid design does have it’s drawbacks though .... It is time consuming. You do lose a certain amount of control over how everything 
will look and some of the empty space of a fixed design will work it’s way internally into the liquid design. 
There is also the issue of line length growing to wide which will make you text difficult to read. 
Using max-width is an option for browsers outside of Internet Explorer. IE will need it’s own workaround to 
keep your lines of text from becoming too wide. A liquid layout can often be more difficult and time consuming 
to develop and test.
		  </div>
		</div>
	  </div>
      <div id="content-right"> 
	    <div class="color_box_one">
		  <div class="title_two" style="padding-bottom: 10px;">Sign in with Scrumpad account</div>
		  <div class="content_two">
		   <form action="/login/login" method="post">
		    <div class="form-row">
			  <div class="form-left">Username : </div>
			  <div class="form-right">
                <input id="user_name" name="user_name" size="23" type="text">
              </div>
			</div>
		    <div class="form-row">
			  <div class="form-left">Password : </div>
			  <div class="form-right">
                <input id="password" name="password" size="23" type="password">
              </div>
			</div>
		    <div class="form-row">
			  <div class="form-left"></div>
			  <div class="form-right">
                <input name="commit" value="Login" type="submit">
				<a href="http://www.scrumpad.com/login/forgot_password">Forgot Password</a> ?
              </div>
			</div>
		    <div class="form-row">
			  <div class="form-left"></div>
			  <div class="form-right">
                New User? &nbsp;<a href="http://www.scrumpad.com/company_signup/signup">Signup</a>
              </div>
			</div>
		   </form>
		  </div>
		</div>
		<div id="content-seperator"></div>		
	    <div class="color_box_one">
		  <div class="title_two" style="padding-bottom: 10px;">Sign in to your account at Code71.com</div>
		  <div class="content_two">
		   <form id="gaia_loginform" method="post" action="https://www.google.com/a/code71.com/LoginAction2?service=mail">
            <input type="hidden" value="default" name="ltmpl"/>
            <input type="hidden" value="2" name="ltmplcache"/>
		    <div class="form-row">
			  <div class="form-left">Username : </div>
			  <div class="form-right">
                <input type="hidden" value="https://mail.google.com/a/code71.com/" id="continue" name="continue"/>
			  <input type="hidden" value="mail" id="service" name="service"/>
			  <input type="hidden" value="false" id="rm" name="rm"/>
			  <input type="hidden" value="default" id="ltmpl" name="ltmpl"/>
			  <input type="hidden" value="en" id="hl" name="hl"/>
			  <input type="hidden" value="default" id="ltmpl" name="ltmpl"/>
			  <input type="text" class="gaia le val" value="" size="8" id="Email" name="Email"/> @code71.com
              </div>
			</div>
		    <div class="form-row">
			  <div class="form-left">Password : </div>
			  <div class="form-right">
                <input type="password" class="gaia le val" size="21" id="Passwd" name="Passwd"/>
              </div>
			</div>
		    <div class="form-row">
			  <div class="form-left"></div>
			  <div class="form-right">
			  <input type="checkbox" value="yes" id="PersistentCookie" name="PersistentCookie"/>
  			  <input type="hidden" value="1" name="rmShown"/> Remember me. 
              </div>
			</div>
		    <div class="form-row">
			  <div class="form-left"></div>
			  <div class="form-right">
                <input type="submit" value="Sign in" name="signIn" class="gaia le button"/>
              </div>
			</div>
		   </form>
		  </div>
		</div>
	  </div>
    </div>
    <div id="body-seperator"> 
      <div id="seperator-left">&nbsp;</div>
      <div id="seperator-middle">&nbsp;</div>
      <div id="seperator-right">&nbsp;</div>
    </div>
    <div id="body-footer"> 
      <div id="footer-left">&nbsp;</div>
      <div id="footer-middle"> 
        <div id="footer-link"> [ <a href="index.html">Home</a> ] [ <a href="http://morshed-alam.blogspot.com" target="_blank">My Blog</a> 
          ] [ <a href="http://www.morshed-alam.com" target="_blank">View My Personal Website</a> ] </div>
        <div id="copyright"> ©Copyright 2004-2008, All Rights Reserved</div>
      </div>

      <div id="footer-right">&nbsp;</div>
    </div>
  </div>
</center>
</body>
</html>
